<template>
    <el-dialog
        title="事项处理"
        :visible.sync="differenceDialogShow"
        width="85%"
        style="min-width: 1100px"
        :before-close="handleClose"
    >
        <div>
            <el-form ref="form" :model="dataObj" label-width="120px">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="开票单位：">
                            {{ dataObj.kpdw }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="发票代码：">
                            {{ dataObj.fpdm }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="发票号码：">
                            {{ dataObj.fphm }}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="发票总金额：">
                            {{ dataObj.fpje }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="发票总税额：">
                            {{ dataObj.fpse }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <div class="labelRedClass">
                            <el-form-item label="金额差异：">
                                {{ dataObj.jecy }}
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="流水总金额：">
                            {{ dataObj.lsje }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="流水总税额：">
                            {{ dataObj.lsse }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <div class="labelRedClass">
                            <el-form-item label="税额差异：">
                                {{ dataObj.secy }}
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="允许税额差异：">
                            {{ dataObj.yxcyje }}
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="差异原因：">
                            <span class="masterFont">
                                (此处原因为审批人编写)
                            </span>
                            <el-input v-model="dataObj.cyjesm" disabled></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="发票项目明细：">
                            <tableList
                                ref="tableListPageRef"
                                border
                                maxHeight="330"
                                :keySet="keySet2"
                                :tableData="list"
                                :showSelection="true"
                                @handleSelectionChange="handleSelectionChange"
                                handlerFixed="right"
                                :handlerShow="true"
                            >
                                <template #handler="{ row }">
                                    <div
                                        v-on:click="look(row)"
                                        class="worldBlueBtn"
                                    >
                                        查看
                                    </div>
                                </template>
                            </tableList>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <DifferenceDetailDialog v-model="detailShow" :selectRow='selectRow' :isApply='isApply'></DifferenceDetailDialog>
    </el-dialog>
</template>
<script>
import tableList from '@/components/tableList/index.vue'
import DifferenceDetailDialog from './DifferenceDetailDialog.vue'
import { getMatchDetail } from '@/api/matchFlow.js'
import { getMatchDetail as  getMatchDetailRevoke} from '@/api/matchFlowRevoke.js'

export default {
    name: 'mergeDialog',
    model: {
        prop: 'differenceDialogShow',
        event: 'change',
    },

    props: {
        differenceDialogShow: {
            type: Boolean,
            default: false,
        },
        matid: {
            default: '',
        },
        isApply: {
            type: Number,
            default: true,
        },
    },
    data() {
        return {
            dataObj: {
                kpdw: '',
                val: '',
                radio: '3',
            },
            detailShow: false,
            selectRow: {},
            list: [],
            selectList: [],
            keySet2: [
                {
                    label: '货物或应税劳务、服务名称',
                    englishName: 'spmc',
                                        width: 'labelWidth',
                },
                {
                    label: '规格型号',
                    englishName: 'ggxh',
                    width: 180,
                },
                {
                    label: '数量',
                    englishName: 'sl',
                    width: 180,
                },
                {
                    label: '单价（含税）',
                    englishName: 'hsdj',
                    width: 180,
                },
                {
                    label: '金额（含税）',
                    englishName: 'hsje',
                    width: 180,
                },
                {
                    label: '税率',
                    englishName: 'slv',
                    width: 180,
                },
                {
                    label: '税额',
                    englishName: 'se',
                    width: 180,
                },
                {
                    label: '流水总金额',
                    englishName: 'lszje',
                    width: 180,
                },
                {
                    label: '流水税额',
                    englishName: 'lszse',
                    width: 180,
                },
                {
                    label: '金额差异',
                    englishName: 'jecy',
                    width: 180,
                },
                {
                    label: '税额差异',
                    englishName: 'secy',
                    width: 180,
                },
            ],
        }
    },
    methods: {
        getList() {
            if(this.matid){
                let axios =this.isApply === 1? getMatchDetail : getMatchDetailRevoke
        
                axios(this.matid).then(({ data, code }) => {
                    this.dataObj = data;
                    this.list = data.matchItemRecordList;
                })
            }
        },
        look(val) {
            console.log(val)
            this.selectRow = val;
            this.selectRow.matid = this.dataObj.matid;
            this.detailShow = true
        },
        handleSelectionChange(val) {
            console.log(val)
            // 选择一个,就选中一个
            this.selectList = val.ids || []
        },
        handleClose() {
            this.$emit('change', false)
        },
        search() {
            alert('发请求')
        },
        confirm() {
            this.$emit('resList', {})
            this.$emit('change', false)
        },
        cancle() {
            this.list = []
            this.selectList = []
            this.$emit('change', false)
        },
    },
    watch: {
        differenceDialogShow(newV) {
            if (newV) {
                this.getList()
            }
        },
    },
    components: {
        tableList,
        DifferenceDetailDialog,
    },
}
</script>

<style lang="scss" scoped>
.masterFont {
    color: red !important;
}
::v-deep .labelRedClass .el-form-item__label {
    color: red;
}
::v-deep .el-dialog_wrapper .dialog-fade-leave-active {
    animation-fill-mode: forwards;
}

::v-deep .el-dialog__body {
    padding: 10px 20px;
}

::v-deep .el-row {
    margin-bottom: 12px;
}
</style>

<style lang='scss'>
@media (max-height: 850px) and (min-height: 500px) {
    // .el-dialog{
    //     margin-top: 7vh !important;
    // }
    .el-dialog {
        margin-top: 4vh !important;
    }
    .el-dialog__body {
        max-height: 80vh !important;
    }
}
@media (max-height: 3600px) and (min-height: 850px) {
    .el-dialog {
        margin-top: 15vh !important;
    }
}
</style>